import React from "react";
import Tabs from "./tabs";
import { toJS } from "mobx";
import { WeaNewScroll } from "ecCom";
import ThemePane from "./pane/Theme";
import { inject, observer } from "mobx-react";
import { rm_tabs } from "../../../../constants/form";
import ComponentPropsPane from "./pane/ComponentProps";
import "./index.less";

const { PROPS, SETTING, THEME } = rm_tabs;

@inject('edcFormDesignerStore')
@observer
export default class RightMenu extends React.Component {
  constructor(props) {
    super();
    
    this.formStore = props.edcFormDesignerStore;
    this.store = this.formStore.rightMenuStore;
    this.componentStore = this.formStore.componentStore;
  }

  renderPane(tabKey) {
    const { onPropsChange, currCom } = this.componentStore;
    
    switch (tabKey) {
      case PROPS:
        return (
          <ComponentPropsPane
            com={toJS(currCom)}
            onChange={onPropsChange}
          />
        );
      case SETTING:
          return null;
      case THEME:
          return (
            <ThemePane />
          );
      default:
        break;
    }
  }

  render() {
    const { tabs, tabKey, onTabChange } = this.store;

    return (
      <div className='ef-right'>
        <Tabs tabs={tabs} tabKey={tabKey} onChange={onTabChange} />
        <div className='wev-edc-form-pane'>
          <WeaNewScroll height='100%'>
            <div className='ef-pane-cotent'>
              {this.renderPane(tabKey)}
            </div>
          </WeaNewScroll>
        </div>
      </div>
    );
  }
}